<template>
  <div id="cart-bottom">
    <div class="check-all" @click="checkClick">
      <check-button :isCheck="checkedAll" class="checkbtn"/>全选
    </div>
    <div class="totalPrice">
      合计:{{totalPrice}}
    </div>
		<div class="settlement">
			立即结算({{checkLength}})
		</div>
  </div>
</template>

<script>
	import checkButton from "components/content/checkButton/CheckButton.vue"
	import { mapGetters, mapMutations } from "vuex"
  export default {
    components: {
    	checkButton
    },
		computed: {
			...mapGetters(["cartList"]),
			totalPrice() {
				return "¥" + this.cartList.filter(item => {
					return item.check
				}).reduce((preValue, item) => {
					return preValue + item.price * item.count
				},0).toFixed(2)
			},
			checkLength(){
				return this.cartList.filter(item => item.check).length
			},
			checkedAll(){
				if(!this.cartList.length) return false
				return !(this.cartList.filter(item => !item.check).length)
			}
		},
		methods:{
			...mapMutations(["check_off","check_on"]),
			checkClick(){
				if (this.checkedAll) {
					this.check_off()
				} else{
					this.check_on()
				}
			}
		}
  }
</script>

<style scoped>
	#cart-bottom{
		height: 44px;
		display: flex;
		
		position: fixed;
		bottom: 49px;
		left: 0;
		right: 0;
		width: 100%;
		
		justify-content: space-between;
		background-color: #eee;
		align-items: center;
	}
	.check-all{
		display: flex;
		align-items: center;
		margin-left: 10px;
	}
	.checkbtn{
		width: 20px;
		height: 20px;
	}
	.settlement{
padding: 0 15px;
background-color: var(--color-tint);
height: 100%;
display: flex;
align-items: center;
color: #fff;
	}
</style>
